<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>common_plan</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="css/mui.picker.min.css" rel="stylesheet" />
<style>
	.mui-switch.mui-active {
	    border-color: #FFDA44;
	    background-color: #FFDA44;
	}
	.mui-switch-mini {
	    width: 41px;
	}
	.mui-switch {
		z-index: 10;
		height: 24px;
	}
	.mui-switch .mui-switch-handle {
	    top: -1px;
	    left: -1px;
	    width: 22px;
	    height: 22px;
    }
    
    .mui-content { background: #ffffff;}
    

</style>
<script src="js/mui.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body id="common_plan">
	<header id="com_plan_header">
		<i class="iconfont">&#xe602;</i>
		<h4>常用档期</h4>
		<span>管理</span>
	</header>
	<dl class="com_plan_con">
		<dd>
			<strong>周二周五</strong>
			<div class="label_wrap">
				<span>啦啦啦啦</span>
				<span>啦啦啦啦</span>
				<span>啦啦啦啦</span>
			</div>
			<div class="mui-switch mui-switch-mini mui-active">
				<div class="mui-switch-handle"></div>
			</div>
		</dd>
		<dt>
			<i class="iconfont">&#xe623;</i>
			<em>地点</em>
			<span>广州师范大学 | 5km</span>
		</dt>
		<dt>
			<i class="iconfont">&#xe601;</i>
			<em>时间</em>
			<span>11:00 - 11:00</span>
		</dt>
	</dl>
	<dl class="com_plan_con unactive">
		<dd>
			<strong>周二周五</strong>
			<div class="label_wrap">
				<span>啦啦啦啦</span>
				<span>啦啦啦啦</span>
				<span>啦啦啦啦</span>
			</div>
			<div class="mui-switch mui-switch-mini">
				<div class="mui-switch-handle"></div>
			</div>
		</dd>
		<dt>
			<i class="iconfont">&#xe623;</i>
			<em>地点</em>
			<span>广州小蛮腰| 5km</span>
		</dt>
		<dt>
			<i class="iconfont">&#xe601;</i>
			<em>时间</em>
			<span>11:00 - 11:00</span>
		</dt>
	</dl>
	<dl class="com_plan_con unactive">
		<dd>
			<strong>周二周五</strong>
			<div class="label_wrap">
				<span>啦啦啦啦</span>
				<span>啦啦啦啦</span>
				<span>啦啦啦啦</span>
			</div>
			<div class="mui-switch mui-switch-mini">
				<div class="mui-switch-handle"></div>
			</div>
		</dd>
		<dt>
			<i class="iconfont">&#xe623;</i>
			<em>地点</em>
			<span>广州研究院 | 5km</span>
		</dt>
		<dt>
			<i class="iconfont">&#xe601;</i>
			<em>时间</em>
			<span>11:00 - 11:00</span>
		</dt>
	</dl>
	<button class="orange_btn com_plan_btn">确认预约</button>
</body>

<script>
	mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui('.mui-switch').each(function(i) { //循环所有toggle

			this.addEventListener('toggle', function(event) {
				//event.detail.isActive 可直接获取当前状态
				
				if(event.detail.isActive){
					$('.com_plan_con').eq(i).removeClass('unactive');
				}else{
					$('.com_plan_con').eq(i).addClass('unactive');
				}
			});
		});
	
</script>
</html>
